<template>
  <!-- 好友列表抽屉 -->
  <a-drawer
    :visible="isShow"
    :title="l('FriendsList')"
    @close="onClose"
    width="400px"
    :mask="false"
  >
    <div class="search">
      <a-input
        v-model:value="filterText"
        :placeholder="l('AddFriendPlaceholder')"
        @keyup="filterFriends"
      >
        <template #prefix>
          <user-outlined type="user" />
        </template>
        <template #suffix>
          <a-tooltip :title="l('AddFriendInputTips')">
            <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
          </a-tooltip>
        </template>
      </a-input>
      <a-button
        :type="'primary'"
        v-show="filterText.length > 0"
        @click="addFriend"
        class="add-friend"
      >
        {{ l('AddFriend') }}
      </a-button>
    </div>
    <div class="user-list">
      <a-list item-layout="horizontal" :data-source="filterFriendList">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta
              :description="item.friendTenancyName ? item.friendTenancyName : 'Host'"
            >
              <template #title>
                <a @click="toMessageDetail(item)">{{ item.friendUserName }}</a>
                <a-badge :count="item.unreadMessageCount" class="message-count" />
              </template>
              <template #avatar>
                <a-badge :status="item.isOnline ? 'success' : 'default'" dot :offset="[-5, 45]">
                  <a-avatar
                    :src="item.friendProfilePicture"
                    :size="50"
                    @click="toMessageDetail(item)"
                  />
                </a-badge>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </div>
    <div class="block-user">
      <div v-if="blockFriendList.length <= 0">
        <h2>{{ l('BlockUserFriend') }}</h2>
        <h5> {{ l('UserBlockTips') }} </h5>
      </div>
      <div v-else>
        <h2>{{ l('BlockUserFriend') }}</h2>
        <a-list item-layout="horizontal" :data-source="blockFriendList">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta
                :description="item.friendTenancyName ? item.friendTenancyName : 'Host'"
              >
                <template #title>
                  <a @click="toMessageDetail(item)">{{ item.friendUserName }}</a>
                  <a-badge :count="item.unreadMessageCount" class="message-count" />
                </template>
                <template #avatar>
                  <a-badge :status="item.isOnline ? 'success' : 'default'" dot :offset="[-5, 45]">
                    <a-avatar
                      :src="item.friendProfilePicture"
                      :size="50"
                      @click="toMessageDetail(item)"
                    />
                  </a-badge>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </div>
    <div hidden v-if="!chatDrawer"><input type="text" v-model="updateTag" /></div>
  </a-drawer>
  <!-- 聊天详情抽屉 -->
  <a-drawer v-model:visible="chatDrawer" :title="l('Chat')" width="400px" :mask="false">
    <!-- 头部 -->
    <div class="chat-message-header">
      <div clsss="chat-message-username">
        {{
          getShownUserName(
            signalrService.selectedUser.friendTenancyName,
            signalrService.selectedUser.friendUserName,
          )
        }}
      </div>
      <a-badge
        :status="signalrService.selectedUser.isOnline ? 'success' : 'default'"
        :text="signalrService.selectedUser.isOnline ? 'online' : 'offline'"
      />
      <a-dropdown :trigger="['click']" class="blockUser">
        <ellipsis-outlined style="font-size: 20px" />
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a
                href="javascript:;"
                @click="block"
                v-if="signalrService.selectedUser.state == 'Accepted'"
                >{{ l('BlockUser') }}</a
              >
              <a
                href="javascript:;"
                v-if="signalrService.selectedUser.state == 'Blocked'"
                @click="unblock"
                >{{ l('UnblockUser') }}</a
              >
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <!-- 聊天内容展示区 -->
    <div class="chat-message-content" id="chat-message-content">
      <div v-for="item in signalrService.selectedUser.messages" :key="item.id">
        <a-row justify="start" v-if="item.side == 1">
          <a-col>
            <a-space align="center">
              <a-avatar :size="40" :src="currentProfilePicture"> </a-avatar>
              <b style="font-size: 1.175rem !important">{{ currentUserInfo.userName }}</b>
              <span class="time-text">{{ _momentFromNow(item.creationTime) }}</span>
            </a-space>
            <p class="message-item message-item-left">
              <g-chat-message :message="item"></g-chat-message>
            </p>
          </a-col>
        </a-row>
        <a-row justify="end" v-if="item.side == 2">
          <a-col>
            <a-space align="center">
              <a-avatar :size="40" :src="signalrService.selectedUser.friendProfilePicture">
              </a-avatar>
              <b style="font-size: 1.175rem !important">{{
                signalrService.selectedUser.friendUserName
              }}</b>
              <span class="time-text">{{ _momentFromNow(item.creationTime) }}</span>
            </a-space>
            <p class="message-item message-item-right">
              <g-chat-message :message="item"></g-chat-message>
            </p>
          </a-col>
        </a-row>
      </div>
    </div>
    <!-- 发送消息区 -->
    <div class="chat-message-footer">
      <a-textarea
        v-model:value="chatMessage"
        show-count
        :maxlength="1000"
        :disabled="signalrService.selectedUser.state == 'Blocked'"
      />
      <div class="btn-group">
        <a-row>
          <a-col
            ><a-upload
              :action="uploadFileUrl"
              :multiple="false"
              v-model:file-list="uploadfileList"
              :headers="uploadHeaders"
              @change="uploadImage"
            >
              <a-button>
                <template #icon><camera-outlined /></template>
              </a-button> </a-upload
          ></a-col>
          <a-col>
            <a-upload
              :action="uploadFileUrl"
              :multiple="false"
              v-model:file-list="uploadfileList"
              :headers="uploadHeaders"
              @change="uploadFile"
            >
              <a-button>
                <template #icon><file-outlined /></template>
              </a-button>
            </a-upload>
          </a-col>
          <a-col>
            <a-button @click="shareCurrentLink">
              <template #icon><link-outlined /></template>
            </a-button>
          </a-col>
          <a-col>
            <a-button type="primary" class="reply" @click="sendMessage($event)">{{
              l('Reply')
            }}</a-button>
          </a-col>
        </a-row>
      </div>
    </div>
    <div hidden v-if="chatDrawer"><input type="text" v-model="updateTag" /></div>
  </a-drawer>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import Chat from './chat';

  export default defineComponent({
    name: 'chat',
    mixins: [Chat],
  });
</script>

<style lang="less" scoped>
  .search {
    margin-left: 18px;
    margin-bottom: 20px;
    .add-friend {
      margin-top: 10px;
      width: 334px;
    }
  }
  .blockUser {
    position: absolute;
    right: 50px;
  }
  .message-count {
    position: absolute;
    right: 0;
  }
  .user-list {
    margin-left: 10px;
    height: auto;
  }
  .time-text {
    color: #b5b5c3 !important;
    font-size: 0.925rem;
  }
  .chat-message-header {
    text-align: center;
  }
  .chat-message-username {
    width: 100%;
    text-align: center;
  }
  .block-user {
    margin-top: 80px;
  }
  .message-item {
    color: #7e8299 !important;
    font-size: 1.08rem;
    width: 100% !important;
    font-weight: 500 !important;
    text-align: left !important;
    padding: 0.8rem !important;
    margin-top: 0.5rem !important;
    border-radius: 0.42rem !important;
  }
  .message-item-right {
    background-color: #e1f0ff !important;
  }
  .message-item-left {
    background-color: #c9f7f5 !important;
  }
  .btn-group {
    margin-top: 20px;
    width: 100%;
    .reply {
      margin-left: 80px;
      margin-right: 0px;
    }
  }
  .chat-message-content {
    height: 700px;
    overflow: auto;
  }
</style>
